<template>
  <div :class="getClass">
    <template v-if="canFullscreen">
      <el-tooltip :content="t('component.modal.restore')" placement="bottom" v-if="fullScreen">
        <el-button type="danger" @click="handleFullScreen" text>
          <svg-icon icon-class="exit-fullscreen" :size="20" />
        </el-button>
      </el-tooltip>
      <el-tooltip :content="t('component.modal.maximize')" placement="bottom" v-else>
        <el-button type="danger" @click="handleFullScreen" text>
          <svg-icon icon-class="fullscreen" :size="20" />
        </el-button>
      </el-tooltip>
    </template>
    <el-tooltip :content="t('component.modal.close')" placement="bottom">
      <el-button type="danger" @click="handleCancel" text>
        <svg-icon icon-class="close" :size="20" />
      </el-button>
    </el-tooltip>
  </div>
</template>

<script lang="ts" setup>
import { useDesign } from '@/hooks/web/useDesign';
import { useI18n } from '@/hooks/web/useI18n';
import { computed } from 'vue';

const props = defineProps({
  canFullscreen: { type: Boolean, default: true },
  fullScreen: { type: Boolean },
})

const emit = defineEmits<{
  (e: 'cancel'): void,
  (e: 'fullscreen'): void
}>()

const { t } = useI18n()
const { prefixCls } = useDesign('basic-modal-close');
const getClass = computed(() => {
  return [
    prefixCls,
    `${prefixCls}--custom`,
    {
      [`${prefixCls}--can-full`]: props.canFullscreen,
    },
  ];
});

function handleCancel() {
  emit('cancel')
}

function handleFullScreen() {
  emit('fullscreen')
}

</script>